
{$helper->setJs('tiny_mce/tiny_mce.js')}
{$helper->setJs('tiny_mce/full.js')}    

    <style>
    .connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    </style>
<script type="text/javascript">
                                  // When the document is ready set up our sortable with it's inherant function(s)
   function showValues() {
      var order; 
      order = "&1="+ $("#10").sortable('toArray');
      order = order +"&2="+ $("#20").sortable('toArray');  
      order = order +"&menus=" + $("#menus").sortable('toArray'); 
       
      $("#info").load("http://voetbalpoule/test.php?"+order);
    }
   
   $(function() { 
       

        $( ".connectedSortable" ).sortable({
              update : showValues}).disableSelection();
                      

        var $tabs = $( "#tabs" ).tabs();
        $( "#tabs" ).find( ".ui-tabs-nav" ).sortable({ 
            axis: "x",
            update: showValues 
        });    
        
        $( "#tabs span.ui-icon-close" ).live( "click", function() {
            var index = $( "li", $tabs ).index( $( this ).parent() );
            $tabs.tabs( "remove", index );
             var order = $tabs.tabs.sortable('serialize');  
            $("#info").load("http://voetbalpoule/test.php?"+index);
        });

        var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {

            var $id = ui.draggable.attr('id');

            var $item = $( this );

            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "fast", function() {
                $( this ).appendTo( $list ).show( "fast" );
            });


            var $listname = $list.attr('id');
                {literal}
                $.get("http://voetbalpoule/test.php", {menu:$listname, module:$id}, function(data){ 
                {/literal}

        }); 



        }
    });
    });

</script> 



<div id="tabs">
    <ul id="menus">
        <li id="1"><a href="#tabs-1"  class="handle">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
        <li id="2"><a href="#tabs-2"  class="handle">Proin dolor</a>  <span class="ui-icon ui-icon-close">Remove Tab</span></li>
    </ul>
    <div id="tabs-1">
        <ul id="10" class="connectedSortable ui-helper-reset">
            <li id="0" class="ui-state-default">Item 1</li>
            <li id="1" class="ui-state-default">Item 2</li>
            <li id="3" class="ui-state-default">Item 3</li>
            <li id="4" class="ui-state-default">Item 4</li>
            <li id="5" class="ui-state-default">Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="20" class="connectedSortable ui-helper-reset">
            <li id="6" class="ui-state-default">Item 1</li>
            <li id="7" class="ui-state-default">Item 2</li>
            <li id="8" class="ui-state-default">Item 3</li>
            <li id="9" class="ui-state-default">Item 4</li>
            <li id="10" class="ui-state-default">Item 5</li>
        </ul>
    </div>
</div>  

<div id="tabs">
    <ul id="menus">
        <li id="1"><a href="#tabs-1"  class="handle">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
        <li id="2"><a href="#tabs-2"  class="handle">Proin dolor</a>  <span class="ui-icon ui-icon-close">Remove Tab</span></li>
    </ul>
    <div id="tabs-1">
        <ul id="10" class="connectedSortable ui-helper-reset">
            <li id="0" class="ui-state-default">Item 1</li>
            <li id="1" class="ui-state-default">Item 2</li>
            <li id="3" class="ui-state-default">Item 3</li>
            <li id="4" class="ui-state-default">Item 4</li>
            <li id="5" class="ui-state-default">Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="20" class="connectedSortable ui-helper-reset">
            <li id="6" class="ui-state-default">Item 1</li>
            <li id="7" class="ui-state-default">Item 2</li>
            <li id="8" class="ui-state-default">Item 3</li>
            <li id="9" class="ui-state-default">Item 4</li>
            <li id="10" class="ui-state-default">Item 5</li>
        </ul>
    </div>
</div>
          
<pre><div id="info"></div></pre>